<template>
	<div class="container">
		<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
			<div class="selectBox">
				<div>资产名称：</div>
				<el-select v-model="formAll.name" filterable placeholder="请选择" clearable>
					<el-option v-for="item in nameList" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div>所属部门：</div>
				<el-select v-model="formAll.department" filterable placeholder="请选择" clearable>
					<el-option v-for="item in departmentList" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div>负责人：</div>
				<el-select v-model="formAll.head" filterable placeholder="请选择" clearable>
					<el-option v-for="item in headList" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div>状态：</div>
				<el-select v-model="formAll.state" filterable placeholder="请选择" clearable>
					<el-option v-for="item in stateList" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="selectBox">
				<div style="width: 120px;text-align: center;">价格：</div>
				<el-input placeholder="请输入价格" v-model="formAll.price" clearable>
				</el-input>
			</div>
			<template>
				<div style="margin-left: 15px;">购买时间：</div>
				<div class="block">
					<!-- <el-date-picker v-model="value" :picker-options="expireTimeOPtion" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker> -->
					<el-date-picker v-model.lazy="chooseTime" :picker-options="expireTimeOPtion"
						value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</template>
			<div style="margin: 10px 20px;">
				<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button type="success" icon="el-icon-plus" @click="addAssetDiolog = true">添加</el-button>
				<el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
			</div>
		</div>
		<template>
			<el-table :data="tableData" border style="width: 100%" :header-cell-style="headClass"
				:cell-style="rowClass">
				<el-table-column fixed prop="name" label="资产名称" width="150">
				</el-table-column>
				<el-table-column prop="department" label="所属部门" width="120">
				</el-table-column>
				<el-table-column prop="place" label="存放位置" width="120">
				</el-table-column>
				<el-table-column prop="price" label="价格" width="120">
				</el-table-column>
				<el-table-column prop="head" label="负责人" width="120">
				</el-table-column>
				<el-table-column prop="state" label="状态" width="150">
				</el-table-column>
				<el-table-column prop="life" label="预计使用寿命" width="120">
				</el-table-column>
				<el-table-column prop="buydate" label="购买日期" width="200">
				</el-table-column>
				<el-table-column prop="duedate" label="到期日" width="200">
				</el-table-column>
				<el-table-column prop="maintenanceRecords" label="维修记录" width="250">
				</el-table-column>
				<el-table-column prop="notes" label="备注" width="200">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="success" @click="editAsset(scope.row.icd)">编辑</el-button>
						<el-button type="danger" @click="deleteAsset(scope.row.icd)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div style="width: 100%;display: flex;flex-direction: row;justify-content: center;margin: 10px auto;">
			<div class="block">
				<el-pagination @current-change="handleCurrentChange"
					:page-size="formAll.pageSize" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<!-- 添加资产弹出框 -->
		<el-dialog title="添加资产" :visible.sync="addAssetDiolog" width="30%">
			<template>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">资产名称：</div>
					<el-input placeholder="请输入资产名称" v-model="addForm.name" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">所属部门：</div>
					<el-input placeholder="请输入资产所属部门" v-model="addForm.department" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">存放位置：</div>
					<el-input placeholder="请输入资产存放位置" v-model="addForm.place" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">价格：</div>
					<el-input placeholder="请输入资产价格" v-model="addForm.price" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">负责人：</div>
					<el-input placeholder="请输入资产负责人" v-model="addForm.head" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">状态：</div>
					<!-- <el-input placeholder="请输入资产状态" v-model="addForm.state" clearable style="width: 300px;">
					</el-input> -->
					<el-select v-model="addForm.state" filterable placeholder="请选择" clearable>
						<el-option v-for="item in chooseState" :label="item.value" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">预计使用寿命：</div>
					<el-input placeholder="请输入资产预计使用寿命" v-model="addForm.life" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">购买日期：</div>
					<el-date-picker v-model="addForm.buydate" type="datetime" placeholder="请选择资产购买日期"
						:picker-options="expireTimeOPtion" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">到期日期：</div>
					<el-date-picker v-model="addForm.duedate" type="datetime" placeholder="请选择资产到期日期"
						:picker-options="expireTimeOPtion" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">维修记录：</div>
					<el-input placeholder="请输入资产维修记录" v-model="addForm.maintenanceRecords" clearable
						style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">备注：</div>
					<!-- <el-input placeholder="请输入备注" v-model="addForm.notes" clearable style="width: 300px;">
					</el-input> -->
					<textarea style="width: 300px;height: 80px;border: 1px solid #DCDFE6;"
						v-model="addForm.notes"></textarea>
				</div>
				<!-- <div class="tpyeBox">
					<div style="width:150px;text-align: right;">设备类型：</div>
					<el-select v-model="value" placeholder="请选择设备类型" @change="chooseServer()">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div> -->
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="offadd()">取 消</el-button>
				<el-button type="primary" @click="addServer()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改资产弹出框 -->
		<el-dialog title="添加资产" :visible.sync="editAssetDiolog" width="30%">
			<template>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">资产名称：</div>
					<el-input placeholder="请输入资产名称" v-model="editForm.name" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">所属部门：</div>
					<el-input placeholder="请输入资产所属部门" v-model="editForm.department" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">存放位置：</div>
					<el-input placeholder="请输入资产存放位置" v-model="editForm.place" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">价格：</div>
					<el-input placeholder="请输入资产价格" v-model="editForm.price" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">负责人：</div>
					<el-input placeholder="请输入资产负责人" v-model="editForm.head" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">状态：</div>
					<el-select v-model="editForm.state" filterable placeholder="请选择" clearable>
						<el-option v-for="item in chooseState" :label="item.value" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">预计使用寿命：</div>
					<el-input placeholder="请输入资产预计使用寿命" v-model="editForm.life" clearable style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">购买日期：</div>
					<el-date-picker v-model="editForm.buydate" type="datetime" placeholder="请选择资产购买日期"
						:picker-options="expireTimeOPtion" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">到期日期：</div>
					<el-date-picker v-model="editForm.duedate" type="datetime" placeholder="请选择资产到期日期"
						:picker-options="expireTimeOPtion" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">维修记录：</div>
					<el-input placeholder="请输入资产维修记录" v-model="editForm.maintenanceRecords" clearable
						style="width: 300px;">
					</el-input>
				</div>
				<div class="tpyeBox">
					<div style="width:150px;text-align: right;">备注：</div>
					<!-- <el-input placeholder="请输入备注" v-model="addForm.notes" clearable style="width: 300px;">
					</el-input> -->
					<textarea style="width: 300px;height: 80px;border: 1px solid #DCDFE6;"
						v-model="editForm.notes"></textarea>
				</div>
				<!-- <div class="tpyeBox">
					<div style="width:150px;text-align: right;">设备类型：</div>
					<el-select v-model="value" placeholder="请选择设备类型" @change="chooseServer()">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div> -->
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editAssetDiolog = false">取 消</el-button>
				<el-button type="primary" @click="editServer()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getJavaServerData,
		postJavaServerData
	} from "@/api/index.js";
	export default {
		created() {
			this.getTableData()
		},
		data() {
			return {
				ItemValue: "",
				ItemOptions: [],
				departmentList: ['全部'],
				nameList: ['全部'],
				chooseState:[{
					id:0,
					value:'正常',
				},
				{
					id:1,
					value:'遗失',
				},
				{
					id:2,
					value:'损坏',
				}],
				total:0,
				loading: false,
				addAssetDiolog: false,
				editAssetDiolog: false,
				stateList: [],
				tableData: [],
				chooseTime: [],
				headList: [],
				typeList: [],
				addForm: {
					icd: '',
					name: '',
					price: '',
					department: '',
					place: '',
					head: '',
					state: '',
					maintenanceRecords: '',
					life: '',
					duedate: '',
					notes: '',
					buydate: ''
				},
				editForm: {
					icd: '',
					name: '',
					department: '',
					place: '',
					head: '',
					state: '',
					notes: '',
					time: '',
					time2: '',
					pageNum: 1,
					pageSize: 10
				},
				formAll: {
					name: '',
					department: '',
					place: '',
					head: '',
					state: '',
					notes: '',
					time: '',
					time2: '',
					pageNum: 1,
					pageSize: 10
				},
				form: {
					name: '',
					department: '',
					place: '',
					head: '',
					state: '',
					notes: '',
					time: '',
					time2: '',
					pageNum: 1,
					pageSize: 10
				},
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 
					}
				},
			};
		},
		methods: {
			async getTableDataAll() {
				if(this.formAll.name == '全部'){
					this.formAll.name = ''
				}
				if(this.formAll.department == '全部'){
					this.formAll.department = ''
				}
				let res = await postJavaServerData("/Sp/seleASSET_MANAGEMENT", this.formAll)
				console.log(123, res)
				const key = Object.keys(res)
				this.total = parseInt(key[0])
				let array = Object.keys(res).map(key => res[key])
				this.tableData = array[0]
				

			},
			async getTableData() {
				let res = await postJavaServerData("/Sp/seleASSET_MANAGEMENT", this.form)
				console.log(123, res)
				const key = Object.keys(res)
				this.total = parseInt(key[0])
				let array = Object.keys(res).map(key => res[key])
				this.tableData = array[0]
				this.tableData.forEach((item, index) => {
					this.nameList.push(item.name)
					this.departmentList.push(item.department)
					this.headList.push(item.head)
					this.stateList.push(item.state)
				})
				//数组去重
				this.nameList = Array.from(new Set(this.nameList))
				this.departmentList = Array.from(new Set(this.departmentList))
				this.headList = Array.from(new Set(this.headList))
				this.stateList = Array.from(new Set(this.stateList))
			},
			search() {
				if (this.chooseTime) {
					if (this.chooseTime.length == 0) {
						this.formAll.time = ''
						this.formAll.time2 = ''
					} else {
						this.formAll.time = this.chooseTime[0]
						this.formAll.time2 = this.chooseTime[1]
					}
				} else {
					this.formAll.time = ''
					this.formAll.time2 = ''
				}
				this.getTableDataAll()
			},
			async editAsset(icd) {
				//表单恢复初始号
				Object.assign(this.$data.editForm, this.$options.data().editForm);
				this.editAssetDiolog = true
				this.editForm.icd = icd
				let res = await postJavaServerData("/Sp/seleASSET_MANAGEMENT", this.editForm)
				let arr = res[1][0]
				this.editForm.name = arr.name
				console.log(this.editForm.name)
				this.editForm.department = arr.department
				this.editForm.place = arr.place
				this.editForm.head = arr.head
				this.editForm.state = arr.state
				this.editForm.price = arr.price
				this.editForm.maintenanceRecords = arr.maintenanceRecords
				this.editForm.duedate = arr.duedate
				this.editForm.buydate = arr.buydate
				this.editForm.notes = arr.notes
			},
			async editServer(){
				let res = await postJavaServerData("/Sp/upASSET_MANAGEMENT", this.editForm)
				console.log('修改',res)
				if(res.return == '修改成功!'){
					this.$message.success(res.return)
					this.editAssetDiolog = false
					this.getTableData()
				}else{
					this.$message.error('修改失败')
				}
			},
			async deleteAsset(icd) {
				const confirmRes = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (confirmRes !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				let res = await postJavaServerData("/Sp/deleASSET_MANAGEMENT", {
					icd: icd
				})
				if (res.return == '删除成功!') {
					this.$message.success(res.return)
					this.getTableData()
				} else {
					this.$message.error('删除失败!')
				}
			},
			reset() {
				this.formAll.name = ''
				this.formAll.department = ''
				this.formAll.head = ''
				this.formAll.life = ''
				this.formAll.state = ''
				this.chooseTime = []
				this.formAll.time = ''
				this.formAll.time2 = ''
				this.getTableData()
			},
			async addServer() {
				// console.log(this.addForm)
				let res = await postJavaServerData("/Sp/addASSET_MANAGEMENT", this.addForm)
				if (res.return == "添加成功!") {
					//表单恢复初始号
					Object.assign(this.$data.addForm, this.$options.data().addForm);
					this.addAssetDiolog = false
					this.$message.success('添加成功')
					this.getTableData()
				} else {
					this.$message.error('添加失败')
				}
			},
			async upAsset() {
				let res = await postJavaServerData("/Sp/addASSET_MANAGEMENT", this.editForm)
			},
			offadd() {
				this.addAssetDiolog = false
				Object.assign(this.$data.addForm, this.$options.data().addForm);
				console.log(this.addForm)
			},
			handleCurrentChange(val) {
				this.formAll.pageNum = val
				if (this.formAll.name == '' && this.formAll.department == '' && this.chooseTime.length == 0 && this.formAll
					.head == '' && this.formAll.life == '' && this.formAll.state == '') {
					this.getTableData()
				} else {
					this.getTableDataAll()
				}
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;"
			}
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-table__body tr,
	::v-deep .el-table__body td {
		padding: 0;
		height: 50px;
		font-size: 12px;
	}

	.tpyeBox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10px;
	}

	.redBox {
		width: 50px;
		height: 25px;
		background-color: red;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}

	.selectBox {
		margin: 5px 10px;
		width: 300px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.greenBox {
		width: 50px;
		height: 25px;
		background-color: seagreen;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}
</style>
